<script setup lang='ts'>
import { ref } from 'vue';
import { shortcuts, disabledDate } from '../../../utils/time';
import { useRoute } from 'vue-router';
import { reqGetAllMemberProjectById, reqGetProjectById, reqUpdateProjectById } from '../../../apis/project';
import { onMounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { formatDateISOS } from '../../../utils/time'
import useUserStore from '../../../store/modules/user';
import type { ProjectItem } from '../../../apis/project/type';

const useUser = useUserStore()
const detailVisible = defineModel('detailVisible')
const $route = useRoute()
const editMode = ref<boolean>(false)
const detail = ref<ProjectItem>({} as ProjectItem)
const memberTotal = ref<number>()

const haveRight = () => {
  return detail.value?.createdBy?.id === useUser.id || useUser.role === 'admin'
}

const getProjectDetail = async () => {
  const res = await reqGetProjectById(Number($route.params.id))
  if (res.code === 200) {
    detail.value = res.data
  }
}

const getMemberList = async () => {
  const res = await reqGetAllMemberProjectById(Number($route.params.id))
  if (res.code === 200) {
    memberTotal.value = res.data.length
  }
}

const UpdateProject = () => {
  ElMessageBox.confirm(`确认要修改空间 ${detail.value.name}吗?`, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  }).then(async () => {
    let updateData = {
      name: detail.value.name,
      description: detail.value.description,
      startedAt: formatDateISOS(detail.value.startedAt),
      endsAt: formatDateISOS(detail.value.endsAt)
    }
    const res = await reqUpdateProjectById(Number($route.params.id), updateData)
    if (res.code === 200) {
      ElMessage.success('修改成功')
      getProjectDetail()
      detailVisible.value = false
    }
  })

}

onMounted(() => {
  getProjectDetail()
  getMemberList()
})

watch(detailVisible, (newVal: any) => {
  if (newVal) {
    getProjectDetail()
  }
})
</script>


<template>
  <el-drawer v-model="detailVisible" direction="rtl" class="detail" size="40%">
    <template #header>
      <div class="detail_header">
        <span style="font-size: 22px;font-weight: 600;">空间信息</span>
      </div>
    </template>
    <template #default>
      <div class="detail_title">
        空间: <span v-if="!editMode" @click="editMode = true">{{ detail.name }}</span>
        <input v-else v-model="detail.name" class="input" style="width: 80%;border-bottom: 1px solid #fff;"
          @blur="editMode = false" @keyup.enter.native="editMode = false" />
      </div>
      <div class="detail_message">
        <span class="msg">基本信息</span>
        <el-form :inline="true" :model="detail">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item>
                <template #label>
                  <svg t="1743131692243" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5277" width="16" height="16">
                    <path
                      d="M855.905072 188.394764 168.095951 188.394764c-56.456826 0-102.389972 45.932122-102.389972 102.388948l0 442.434621c0 56.455803 45.932122 102.386902 102.389972 102.386902l687.810145 0c56.456826 0 102.387925-45.931099 102.387925-102.386902L958.294021 290.783713C958.292997 234.326886 912.361899 188.394764 855.905072 188.394764zM919.301961 473.036593l0 40.831964 0 191.272301 0 19.61678 0 8.460696c0 34.95614-28.440749 63.396889-63.396889 63.396889L168.095951 796.615223c-34.958186 0-63.397912-28.440749-63.397912-63.396889l0-8.460696 0-19.61678L104.698039 513.868557 104.698039 473.036593 104.698039 290.783713c0-34.957163 28.439726-63.397912 63.397912-63.397912l687.810145 0c34.95614 0 63.396889 28.440749 63.396889 63.397912L919.302985 473.036593z"
                      p-id="5278"></path>
                    <path
                      d="M525.806959 437.118546c-9.689686-22.908756-23.558555-43.48028-41.221844-61.143569-17.666358-17.666358-38.237883-31.532157-61.145615-41.22389-23.723308-10.034541-48.917106-15.122419-74.883501-15.122419-25.967418 0-51.160193 5.088902-74.882478 15.122419-22.909779 9.691733-43.481304 23.557532-61.144592 41.22389-17.665335 17.664312-31.533181 38.235836-41.22389 61.143569-10.034541 23.723308-15.120372 48.917106-15.120372 74.883501 0 25.966395 5.086855 51.160193 15.120372 74.882478 9.69071 22.907733 23.558555 43.481304 41.22389 61.145615 17.663288 17.666358 38.235836 31.532157 61.144592 41.22389 23.721261 10.033517 48.91506 15.119349 74.882478 15.119349 25.966395 0 51.160193-5.086855 74.882478-15.119349 22.908756-9.691733 43.481304-23.561625 61.145615-41.22389 17.662265-17.664312 31.533181-38.237883 41.222867-61.145615 10.034541-23.723308 15.120372-48.916083 15.120372-74.882478C540.928355 486.035652 535.841499 460.841853 525.806959 437.118546zM292.100196 431.300027l0.165776 0c0-31.140231 25.328875-56.458873 56.456826-56.458873 31.140231 0 56.45785 25.318642 56.45785 56.458873l-0.166799 0 0 65.850777 0.166799 0c0 31.139208-25.317619 56.45478-56.45785 56.45478-31.128975 0-56.456826-25.316595-56.456826-56.45478l-0.165776 0L292.100196 431.300027zM416.566976 673.009044c-21.536502 9.105379-44.418652 13.724583-68.010977 13.724583-23.593348 0-46.475498-4.619204-68.010977-13.724583-20.271696-8.576329-38.525432-20.767999-54.295604-36.233226 0.525979-42.947138 23.344684-80.555687 57.348126-101.978603 13.033851 22.470781 37.281091 37.644365 65.125253 37.644365 27.785833 0 51.990095-15.108093 65.035202-37.490869 33.871435 21.445428 56.58167 58.986439 57.107649 101.82306C455.093431 652.238998 436.840718 664.432715 416.566976 673.009044z"
                      p-id="5279"></path>
                    <path
                      d="M766.156002 659.270135 682.292989 659.270135 682.292989 362.011964l83.863013 0c59.268872 0 107.48706 48.219211 107.48706 107.488083l0 82.283028C873.643062 611.051947 825.424874 659.270135 766.156002 659.270135zM723.225237 618.337887l42.930765 0c36.697807 0 66.554812-29.857005 66.554812-66.554812l0-82.283028c0-36.69883-29.857005-66.555835-66.554812-66.555835L723.225237 402.944212 723.225237 618.337887z"
                      p-id="5280"></path>
                    <path d="M591.734484 362.012987l40.932248 0 0 296.744471-40.932248 0 0-296.744471Z" p-id="5281">
                    </path>
                  </svg>
                  <span>空间ID:</span>
                </template>
                <span>{{ detail.id }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <template #label>
                  <svg t="1742979143025" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3424" width="16" height="16">
                    <path
                      d="M511.4 482.7c104.9 0 189.2-85.2 189.2-189.2 0-104-84.4-190.1-189.2-190.1-104.9 0-189.2 85.2-189.2 190.1 0 104.8 84.4 189.2 189.2 189.2z m0-330.2c77.8 0 140.1 63.1 140.1 140.1s-62.3 140.9-140.1 140.9-140.1-63.1-140.1-140.1c0.1-77 62.3-140.9 140.1-140.9z m0 383.4c-197.4 0-358 160.6-358 358.8 0 13.9 10.6 24.6 24.6 24.6 13.9 0 24.6-10.6 24.6-24.6C202.6 724.3 341 585 511.4 585s308.8 139.3 308.8 309.7c0 13.9 10.6 24.6 24.6 24.6 13.9 0 24.6-10.6 24.6-24.6 0-198.2-160.5-358.8-358-358.8z m0 0"
                      fill="#555555" p-id="3425"></path>
                  </svg>
                  <span>成员数量: </span>
                </template>
                <p>{{ memberTotal }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <template #label>
                  <svg t="1742979143025" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3424" width="16" height="16">
                    <path
                      d="M511.4 482.7c104.9 0 189.2-85.2 189.2-189.2 0-104-84.4-190.1-189.2-190.1-104.9 0-189.2 85.2-189.2 190.1 0 104.8 84.4 189.2 189.2 189.2z m0-330.2c77.8 0 140.1 63.1 140.1 140.1s-62.3 140.9-140.1 140.9-140.1-63.1-140.1-140.1c0.1-77 62.3-140.9 140.1-140.9z m0 383.4c-197.4 0-358 160.6-358 358.8 0 13.9 10.6 24.6 24.6 24.6 13.9 0 24.6-10.6 24.6-24.6C202.6 724.3 341 585 511.4 585s308.8 139.3 308.8 309.7c0 13.9 10.6 24.6 24.6 24.6 13.9 0 24.6-10.6 24.6-24.6 0-198.2-160.5-358.8-358-358.8z m0 0"
                      fill="#555555" p-id="3425"></path>
                  </svg>
                  <span>创建人: </span>
                </template>
                <span>{{ detail.createdBy.username }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <template #label>
                  <svg t="1743131404473" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1717" width="16" height="16">
                    <path
                      d="M512 929.959184c-230.4 0-417.959184-187.559184-417.959184-417.959184s187.559184-417.959184 417.959184-417.959184 417.959184 187.559184 417.959184 417.959184-187.559184 417.959184-417.959184 417.959184z m0-794.122449c-207.412245 0-376.163265 168.75102-376.163265 376.163265s168.75102 376.163265 376.163265 376.163265 376.163265-168.75102 376.163265-376.163265-168.75102-376.163265-376.163265-376.163265z"
                      fill="#333333" p-id="1718"></path>
                    <path
                      d="M718.367347 538.122449h-208.979592c-11.493878 0-20.897959-9.404082-20.897959-20.897959s9.404082-20.897959 20.897959-20.897959h208.979592c11.493878 0 20.897959 9.404082 20.897959 20.897959s-9.404082 20.897959-20.897959 20.897959z"
                      fill="#333333" p-id="1719"></path>
                    <path
                      d="M509.387755 538.122449c-11.493878 0-20.897959-9.404082-20.897959-20.897959V256c0-11.493878 9.404082-20.897959 20.897959-20.897959s20.897959 9.404082 20.897959 20.897959v261.22449c0 11.493878-9.404082 20.897959-20.897959 20.897959z"
                      fill="#333333" p-id="1720"></path>
                  </svg>
                  <span>创建时间: </span>
                </template>
                <span>{{ detail.createdAt }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <template #label>
                  <svg t="1742979188747" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5414" width="16" height="16">
                    <path
                      d="M128 213.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667V256a42.666667 42.666667 0 0 0-42.666667-42.666667H128z m0-42.666666h768a85.333333 85.333333 0 0 1 85.333333 85.333333v597.333333a85.333333 85.333333 0 0 1-85.333333 85.333334H128a85.333333 85.333333 0 0 1-85.333333-85.333334V256a85.333333 85.333333 0 0 1 85.333333-85.333333z"
                      fill="#595959" p-id="5415"></path>
                    <path
                      d="M42.666667 384m21.333333 0l896 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333334l-896 0q-21.333333 0-21.333333-21.333334l0 0q0-21.333333 21.333333-21.333333Z"
                      fill="#595959" p-id="5416"></path>
                    <path
                      d="M170.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                      fill="#595959" p-id="5417"></path>
                    <path
                      d="M426.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                      fill="#595959" p-id="5418"></path>
                    <path
                      d="M682.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                      fill="#595959" p-id="5419"></path>
                    <path
                      d="M170.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                      fill="#595959" p-id="5420"></path>
                    <path
                      d="M426.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                      fill="#595959" p-id="5421"></path>
                    <path
                      d="M682.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                      fill="#595959" p-id="5422"></path>
                    <path
                      d="M256 85.333333m21.333333 0l0 0q21.333333 0 21.333334 21.333334l0 170.666666q0 21.333333-21.333334 21.333334l0 0q-21.333333 0-21.333333-21.333334l0-170.666666q0-21.333333 21.333333-21.333334Z"
                      fill="#595959" p-id="5423"></path>
                    <path
                      d="M725.333333 85.333333m21.333334 0l0 0q21.333333 0 21.333333 21.333334l0 170.666666q0 21.333333-21.333333 21.333334l0 0q-21.333333 0-21.333334-21.333334l0-170.666666q0-21.333333 21.333334-21.333334Z"
                      fill="#595959" p-id="5424"></path>
                  </svg>
                  <span>开始时间: </span>
                </template>
                <el-date-picker v-model="detail.startedAt" type="date" placeholder="Pick a day"
                  :disabled-date="disabledDate" :shortcuts="shortcuts" style="width: 150px;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <template #label>
                  <svg t="1742979188747" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5414" width="16" height="16">
                    <path
                      d="M128 213.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667V256a42.666667 42.666667 0 0 0-42.666667-42.666667H128z m0-42.666666h768a85.333333 85.333333 0 0 1 85.333333 85.333333v597.333333a85.333333 85.333333 0 0 1-85.333333 85.333334H128a85.333333 85.333333 0 0 1-85.333333-85.333334V256a85.333333 85.333333 0 0 1 85.333333-85.333333z"
                      fill="#595959" p-id="5415"></path>
                    <path
                      d="M42.666667 384m21.333333 0l896 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333334l-896 0q-21.333333 0-21.333333-21.333334l0 0q0-21.333333 21.333333-21.333333Z"
                      fill="#595959" p-id="5416"></path>
                    <path
                      d="M170.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                      fill="#595959" p-id="5417"></path>
                    <path
                      d="M426.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                      fill="#595959" p-id="5418"></path>
                    <path
                      d="M682.666667 554.666667m21.333333 0l128 0q21.333333 0 21.333333 21.333333l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333333Z"
                      fill="#595959" p-id="5419"></path>
                    <path
                      d="M170.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                      fill="#595959" p-id="5420"></path>
                    <path
                      d="M426.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                      fill="#595959" p-id="5421"></path>
                    <path
                      d="M682.666667 725.333333m21.333333 0l128 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-128 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z"
                      fill="#595959" p-id="5422"></path>
                    <path
                      d="M256 85.333333m21.333333 0l0 0q21.333333 0 21.333334 21.333334l0 170.666666q0 21.333333-21.333334 21.333334l0 0q-21.333333 0-21.333333-21.333334l0-170.666666q0-21.333333 21.333333-21.333334Z"
                      fill="#595959" p-id="5423"></path>
                    <path
                      d="M725.333333 85.333333m21.333334 0l0 0q21.333333 0 21.333333 21.333334l0 170.666666q0 21.333333-21.333333 21.333334l0 0q-21.333333 0-21.333334-21.333334l0-170.666666q0-21.333333 21.333334-21.333334Z"
                      fill="#595959" p-id="5424"></path>
                  </svg>
                  <span>预计结束: </span>
                </template>
                <el-date-picker v-model="detail.endsAt" type="date" placeholder="Pick a day"
                  :disabled-date="disabledDate" :shortcuts="shortcuts" style="width: 150px;" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="detail_content">
        <span class="msg">空间描述</span>
        <el-input v-model="detail.description" type="textarea" rows="10" style="margin-top: 10px;"></el-input>
      </div>
    </template>
    <template #footer>
      <el-button type="primary" style="margin-right: 20px;" @click="UpdateProject" v-if="haveRight()">保存修改</el-button>
    </template>
  </el-drawer>
</template>


<style scoped lang='scss'>
.detail {
  .detail_header {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: -20px;
  }

  .detail_title {
    font-weight: 600;
    font-size: 20px;
    margin-left: 20px;
  }

  .detail_message {
    margin: 20px 0 20px 20px;

    .msg {
      color: #666;
      font-weight: 600;
    }


    .icon {
      margin: 8px 5px 0 0;
    }
  }

  .detail_content {
    margin: 20px;

    .msg {
      color: #666;
      font-weight: 600;
    }
  }
}
</style>